<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="60%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalEntranceTicketData"
          :rules="rulesTerminalEntranceTicket"
          ref="formTerminalEntranceTicketData"
          label-width="140px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalEntranceTicketData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalEntranceTicketData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>

        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceEntranceTicketInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="parameterconfiguration">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminalEntranceTicket"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="后台密码">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.backstageDefaultPwd"
              placeholder="后台密码（默认：123456）"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="打印机类型">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerType"
              clearable
              placeholder="请选择"
              size="small"
              @change="printerTypeChange"
            >
              <el-option
                v-for="dict in formatDictMap('PRINTER_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="打印机型号">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerModel"
              clearable
              placeholder="请选择"
              size="small"
            >
              <div
                v-if="
                  formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerType ===
                  'TICKET_PRINTER'
                "
              >
                <el-option
                  v-for="dict in formatDictMap('TICKET_PRINTER_MODEL')"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </div>
              <div
                v-if="
                  formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerType ===
                  'RECEIPT_PRINTER'
                "
              >
                <el-option
                  v-for="dict in formatDictMap('RECEIPT_PRINTER_MODEL')"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </div>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="打印机接口">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerInterfaceType"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('PRINTER_INTERFACE_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="打印机SN">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerSN"
              placeholder="打印机SN"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="打印机地址">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerAddress"
              placeholder="打印机地址"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印机串口">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerSerialPort"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="打印页眉">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerHead"
              placeholder="打印页眉"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印页脚">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerFooter"
              placeholder="打印页脚"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="扫码方式">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.payMethod"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('SCAN_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="付款时间">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.payTime"
              placeholder="付款时间(秒)"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="检测间隔(秒)">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.frontCheckTime"
              placeholder="检测间隔"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="操作倒计时">
            <el-input
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.operateTime"
              placeholder="操作倒计时"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="纸钞机">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isBill"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <br />
          <el-form-item label="读卡器串口">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.serialPortOfCardReader"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="读卡器类型">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.serialTypeOfCardReader"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('CARD_READER_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="纸钞机串口">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.banknoteMachineSerialPort"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="纸钞机类型">
            <el-select
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.banknoteMachineSerialType"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('BANKNOTE_MACHINE_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="门票模板">
            <el-input
              style="width: 540px"
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.printTemplate"
              placeholder="门票模板"
              clearable
              size="small"
              type="textarea"
              rows="10"
              draggable="true"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="功能开关" name="functionSwitch">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminalEntranceTicket"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="购票">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isBuyTicket"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="取票">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isCollectTicket"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="绑定人脸">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isBindFace"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="退票">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isReturnTicket"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="会员充值">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isMemberRecharge"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="操作明细">
            <el-switch
              v-model="formTerminalData.sysDeviceEntranceTicketOtherSetVO.isOperationDetails"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogEntranceTicketTerminal',
    dicts: [
      'SCAN_TYPE',
      'COM_LIST',
      'CARD_READER_TYPE',
      'BANKNOTE_MACHINE_TYPE',
      'TICKET_PRINTER_MODEL',
      'RECEIPT_PRINTER_MODEL',
      'PRINTER_TYPE',
      'PRINTER_INTERFACE_TYPE',
    ],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeName: 'essentialInfo',
        //        showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalEntranceTicketData: {},
        formTerminalData: {
          sysDeviceEntranceTicketOtherSetVO: {},
        },
        deviceTypeList: [],
        rulesTerminalEntranceTicket: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
        },
        form: {},
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceEntranceTicketDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      //终端设置
      getDeviceEntranceTicketDetails() {
        deviceAction('ENTRANCE_TICKET', 'getDeviceEntranceTicketDetails', this.deviceId).then(
          (response) => {
            this.formTerminalData = response;
            this.formTerminalEntranceTicketData = response;
            if (this.formTerminalEntranceTicketData.isStatus === 1) {
              this.isStatus = false;
            }
            if (this.formTerminalEntranceTicketData.isUpgrade === 0) {
              this.isUpgrade = false;
            }
          },
        );
      },
      //设备信息修改
      deviceEntranceTicketInfoUpdate() {
        this.formTerminalEntranceTicketData.isStatus = this.isStatus === true ? 0 : 1;
        this.formTerminalEntranceTicketData.isUpgrade = this.isUpgrade === true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalEntranceTicketData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      //参数修改
      configureUpdate() {
        deviceAction(
          'ENTRANCE_TICKET',
          'getDeviceEntranceTicketSetOtherInfoUpdate',
          this.formTerminalData,
        ).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      onCloseDialog() {
        this.$emit('close');
      },

      printerTypeChange(val) {
        if (val === 'TICKET_PRINTER') {
          this.formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerModel = 'DL_680';
        } else if (val === 'RECEIPT_PRINTER') {
          this.formTerminalData.sysDeviceEntranceTicketOtherSetVO.printerModel = 'XP_58_IIH';
        }
      },
    },
  };
</script>

<style scoped></style>
